<template>
  <div class="zk-wiki" :style="`height: ${documentHeight}px;`">
    <el-container v-loading="loading">
      <el-header class="zk-wiki_head">
        <div class="head-contion">
          <ul class="head-contion_ul">
            <li>
              <el-autocomplete size="small" popper-class="my-autocomplete" v-model="keyword" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                <i class="el-input__icon el-icon-search" slot="prefix"></i>
                <template slot-scope="{ item }">
                  <div class="title">{{ item.name }}</div>
                  <span class="concent">{{ item.content }}</span>
                </template>
              </el-autocomplete>
            </li>
            <li class="head-contion_li"><a href="http://doc.5ug.com" target="_blank">接口</a></li>
            <li class="head-contion_li" :class="{'contion_li-active':headIndex==index}" v-for="(item,index) in headJson" :key="index" @click="tabClick(item)">{{item.name}}</li>
          </ul>
        </div>
        <div class="head-logo">
          <div class="project_title" v-if="viewModel">{{viewModel.project.name}}</div>
          <img src="../../../../static/img/logo.png" class="logo" />
        </div>
      </el-header>
      <el-container class="wiki-contion" style="background:#F2F2F2; box-sizing:border-sizing;">
        <el-aside width="310px" style="background: #fff;" class="el-aside-wiki">
          <left @change="tabClick" :defaultWiki="defaultWiki" :editModel="false" @editWiki="viewWiki" ref="leftMenu" :viewModel="viewModel" v-if="viewModel"></left>
        </el-aside>
        <el-container ref="elContainer">
          <right ref="editArea" :project="viewModel.project" v-if="viewModel"></right>
          <view-intro @viewWiki="viewWiki" ref="viewArea" :project="viewModel.project" v-if="viewModel"></view-intro>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import left from '@/admins/cloud/admin-wiki-edit/styles/left'
  import right from './widget/right'
  import viewIntro from './widget/view'
  import ala from 'ala'
  export default {
    components: {
      left,
      right,
      viewIntro
    },
    data () {
      return {
        headJson: [
          {
            name: '前端',
            id: '5e6718d3e208207be03451fc'
          },
          {
            name: '后台',
            id: '5e6ec563aad1891a34d08c69'
          },
          {
            name: '规划',
            id: '5e74dfbbaad1891a34d09146'
          }
        ],
        headIndex: 3,
        defaultWiki: {},
        viewModel: null,
        loading: true,
        searchList: [],
        keyword: '',
        documentHeight: 0
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.documentHeight = h - 74
        this.loading = true
        var para = {
          projectId: this.$route.query.id
        }
        this.viewModel = await ala.diyHttpGet('api/wiki/tree', para)
        var wikiId = this.$ala.urlQuery('wikiId')
        var wiki = this.$ala.arrayDeepFind(this.viewModel.wikis, wikiId)
        if (!wiki) {
          wiki = this.viewModel.wikis[0]
        }
        this.defaultWiki = wiki
        this.viewWiki(wiki)
        this.loading = false
      },
      search (keyword, data) {
        keyword = keyword.toLowerCase()
        var array = []
        function find (arr, keyword) {
          arr.forEach(item => {
            if (item.children && item.children.length > 0) {
              find(item.children, keyword)
            }
            if ((item.name && item.name.toLowerCase().indexOf(keyword) > -1) || (item.content && item.content.toLowerCase().indexOf(keyword) > -1)) {
              array.push(item)
            }
          })
        }
        find(data, keyword)
        return array
      },
      querySearch (queryString, cb) {
        this.searchList = this.viewModel.wikis
        var searchList = this.searchList
        var results = queryString ? this.search(queryString, this.viewModel.wikis) : searchList
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      handleSelect (item) {
        this.viewWiki(item)
      },
      tabClick (item) {
        this.$router.push('/admin/develop/wiki?id=' + item.id)
      },
      viewWiki (wiki) {
        this.$nextTick(() => {
          if (wiki.id === 'index') {
            this.$refs.viewArea.init(this.viewModel)
            this.$refs.editArea.init(null)
          } else {
            this.$refs.viewArea.init(null)
            this.$refs.editArea.init(wiki)
          }
        })
      },
      async wathcRoute () {
        var prodjctId = ala.urlId()
        if (this.viewModel.project.id !== prodjctId) {
          await this.init()
        }
      }
    },
    watch: {
      $route: 'wathcRoute'
    }
  }
</script>
<style lang="scss" >
  @import "./var.scss";
</style>



